<template>
  <div class="app-container">
    <!--搜索栏-->
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
      <!-- <el-form-item label="风险分析单元:" label-width="140">
        <el-tree-select
          v-model="queryParams.riskUnitId"
          :data="unitOptions"
          :props="{ value: 'id', label: 'label', children: 'children' }"
          placeholder="请选择风险分析单元"
          filterable
        >
          <template
            class="custom-tree-node"
            #default="{ node, data }"
            :disabled="data.nodeLevel == '1'"
          >
            <span>{{ node.label }}</span>
          </template>
        </el-tree-select>
      </el-form-item> -->
      <el-form-item label="排查周期:" label-width="100">
        <el-select
          v-model="queryParams.checkCycleType"
          placeholder="请选择排查周期"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in periodOption"
            :key="dict.checkPeriodId"
            :label="dict.checkPeriodName"
            :value="dict.checkPeriodId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="排查结果:" label-width="100" prop="level">
        <el-select
          v-model="queryParams.checkStatus"
          placeholder="请选择排查结果"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in checkStateOption"
            :key="dict.code"
            :label="dict.value"
            :value="dict.code"
          />
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="排查任务时间:" label-width="120">
        <el-date-picker
          v-model="dateRange"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item> -->
      <el-form-item label="任务完成时间:" label-width="120">
        <el-date-picker
          v-model="dateRange"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!--数据列表-->
    <el-table v-loading="loading" :data="dataList">
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column
        label="排查任务名称"
        prop="listName"
        width="180"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="排查周期" prop="checkCycleType">
        <template #default="scope">
          <span>{{ parseCheckCycle(scope.row.checkCycleType) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="排查人员"
        prop="checkUserName"
        width="160"
        :show-overflow-tooltip="true"
      />
      <!-- <el-table-column label="排查方式" prop="determineMethodName" width="160" /> -->
      <el-table-column label="开始时间" prop="startDate" width="260">
        <template #default="scope">
          <span>{{ parseTime(scope.row.startDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" prop="endDate" width="260">
        <template #default="scope">
          <span>{{ parseTime(scope.row.endDate) }}</span>
        </template></el-table-column
      >
      <el-table-column label="任务完成时间" prop="endDate" width="260">
        <template #default="scope">
          <span>{{ scope.row.checkTime ? parseTime(scope.row.checkTime) : "/" }}</span>
        </template></el-table-column
      >
      <el-table-column label="排查结果" prop="checkStatus" width="160">
        <template #default="scope">
          <span>{{ parseCheckState(scope.row.checkStatus) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-tooltip content="详情" placement="top">
            <el-button
              link
              type="primary"
              icon="CircleCheck"
              @click="handleInfo(scope.row)"
              v-hasPermi="['hidden:task:query']"
              >详情</el-button
            >
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.current"
      v-model:limit="queryParams.size"
      @pagination="getList"
    />
    <!--隐患排查任务详情-->
    <el-dialog :title="title" v-model="open" width="60%" append-to-body>
      <el-row class="demo-radius">
        <el-col :span="12">
          <span>任务名称：{{ activeTask.listName }}</span>
        </el-col>
        <el-col :span="12">
          <span>排查类型：{{ activeTask.checkTypeName }}</span>
        </el-col>
      </el-row>

      <el-row class="demo-radius" v-for="(item, index) in infoTask" :key="index">
        <el-col :span="14" class="check-info">
          <span>管控措施类型：{{ item.classifyName }}</span>
          <span>管控措施内容：{{ item.riskMeasureDesc }}</span>
          <span>隐患排查内容：{{ item.troubleshootContent }}</span>
        </el-col>
        <el-col :span="10" class="check-info">
          <span>隐患排查情况：{{ item.checkDesc ? item.checkDesc : "-------" }}</span>
          <span>隐患排查结果：{{ parseInfoStatus(item.checkStatus) }} </span>
        </el-col>
      </el-row>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="TaskRecord">
import { getUnitTree } from "@/api/prevent/risk/unit";
import { listCheckTask, getCheckStateList } from "@/api/prevent/hidden/hiddenCheckTask";
import { listPeriod } from "@/api/prevent/hidden/period";
import { getMyWaitCheckTask } from "@/api/prevent/workbench/myCheck";
const unitOptions = ref([]); //风险分析单元选择项
const periodOption = ref([]); //隐患排查周期
const dataList = ref([]); //整改清单数据列表
const checkStateOption = ref([]); //任务排查结果选择项
const loading = ref(true);
const { proxy } = getCurrentInstance();
const total = ref(0);
const dateRange = ref([]);
const checkRange = ref([]);
const router = useRouter();
const title = ref("");
const open = ref(false);
const infoTask = ref(null); //详情对象
const activeTask = ref(null); //详情相关任务

const data = reactive({
  queryParams: {
    current: 1,
    size: 10,
  },
});
const { queryParams } = toRefs(data);

/** 处理查询 */
function handleQuery() {
  if (dateRange.length > 0) {
    queryParams.value.beginTime = dateRange.value[0];
    queryParams.value.endTime = dateRange.value[1];
  }
  getList();
}
/** 重置 */
function resetQuery() {
  queryParams.value = {
    current: 1,
    size: 10,
  };
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 处理隐患任务详情 */
function handleInfo(row) {
  activeTask.value = row;
  getMyWaitCheckTask(row.taskId).then((response) => {
    infoTask.value = response.data;
    loading.value = false;
    open.value = true;
    title.value = "隐患排查任务详情";
  });
}
/** 获取风险等级列表数据 */
function getRiskUnitList() {
  getUnitTree().then((response) => {
    unitOptions.value = response.data;
  });
}

/** 获取隐患排查周期列表数据 */
async function getPeriodList() {
  listPeriod().then((response) => {
    periodOption.value = response.data;
  });
}

/** 获取排查结果状态列表数据 */
async function getCheckStateOPtion() {
  getCheckStateList().then((response) => {
    checkStateOption.value = response.data;
  });
}

/** 处理排查结果数据呈现 */
function parseCheckState(val) {
  var itemTarget = checkStateOption.value.filter((item) => {
    return item.code == val;
  });

  return itemTarget[0].value;
}

/** 处理排查周期数据 */
function parseCheckCycle(checkCycleType) {
  if (periodOption.value.length < 1) return "没有周期";
  var itemTarget = periodOption.value.filter((item) => {
    return item.checkPeriodId == checkCycleType;
  });

  return itemTarget[0].checkPeriodName;
}

/** 处理详情状态 */
function parseInfoStatus(checkStatus) {
  if (checkStatus == "0") {
    return "正常";
  } else if (checkStatus == "1") {
    return "存在隐患";
  } else {
    return "未巡检";
  }
}

/** 获取排查任务记录列表 */
function getList() {
  loading.value = true;
  if (dateRange.value.length > 0) {
    queryParams.value.beginTime = dateRange.value[0];
    queryParams.value.endTime = dateRange.value[1];
  }
  listCheckTask(queryParams.value).then((response) => {
    dataList.value = response.data.dataList;
    total.value = response.data.totalNum;
    loading.value = false;
  });
}
/** 关闭 */
function cancel() {
  open.value = false;
}

onMounted(() => {
  getPeriodList();
});
getRiskUnitList();
getList();
getCheckStateOPtion();
</script>

<style scoped lang="scss">
.info-title {
  height: 48px;
  width: 100%;
  padding: 0 18px;
  border-radius: 5px;
  background-color: #f6f8fa;
  color: #2c2c2c;
  margin: -6px 0 15px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  & .info-back {
    color: #0086ff;
  }
  & span {
    font-weight: 800;
  }
}
.demo-radius {
  width: 90%;
  border: 1px solid var(--el-border-color);
  border-radius: 5px;
  margin: 10px;
  padding: 10px;
}
.check-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  height: 120px;
  & span {
    height: 40px;
    overflow: hidden;
    line-height: 40px;
    color: #9e9e9e;
    font-size: 12px;
  }
}
.check-footer {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
</style>
